<template>
  <div class="le-file-view" :style="'width:'+width+'px;height:'+height+'px'">
    <el-popover
        :disabled="!viewInfo"
        placement="right"
        title=""
        width=""
        trigger="hover"
        content="">
      <div v-if="viewInfo">
        <span class="le-file-view-name">{{ getFileName() }}</span>
        <el-link
            class="le-file-view-link"
            :href="fileObj.url || ''"
            :download="fileObj.name"
            target="_blank">

          {{ fileObj.is_encoded ?'解密':''}}下载
        </el-link>
      </div>
      <div slot="reference" class="le-file-view-content">

        <el-image
            v-if="'image' == fileViewType"
            :src="buildUrl(fileObj.url || '',{h:height,w:width})"
            :preview-src-list="[fileObj.url || '']"
            :style="'width:'+width+'px;height:'+height+'px'"
            fit="scale-down"

        >
          <div slot="placeholder" class="image-slot">
            加载中<span class="dot">...</span>
          </div>
        </el-image>

        <video  v-else-if="'video' == fileViewType"
                :src = "fileObj.url || ''"
                :width="width"
                :height="height"
                controls>

        </video>

        <audio  v-else-if="'audio' == fileViewType"
                :src = "fileObj.url || ''"
                controls>

        </audio>

        <el-link
            v-else
            class="le-file-view-other"
            :href="fileObj.url || ''"
        >

          {{ getFileName() }}
        </el-link>

      </div>
    </el-popover>


    <el-dialog
        title="查看图片"
        :visible.sync="dialogViewImageVisible"
        append-to-body
        destroy-on-close
        :before-close="handleViewImageClose"
        width="90%"
    >
      <img :src="currentViewImageSrc" width="100%">
      <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogViewImageVisible = false">关闭</el-button>
            </span>
    </el-dialog>
  </div>


</template>

<script>

export default {
  components: {
  },
  props: {
    dataFile: {
      type: [Object, String],
      default: () => {
        return {
          url: '',
          type: '',
          name: '',
          is_encoded: false,
        }
      }
    },
    defaultType: {
      type: String,
      default: ''
    },
    fileName: {
      type: String,
      default: ''
    },
    viewInfo: {
      type: Boolean,
      default: false
    },
    width: {
      type: [Number, String],
      default: () => {
        return ''
      }
    },
    height: {
      type: [Number, String],
      default: () => {
        return ''
      }
    },

  },
  data() {
    return {
      dialogViewImageVisible: false,
      currentViewImageSrc: '',
      fileObj: null,
      isVideo: false,
      fileViewType: '',
    }
  },
  created() {
    let _this = this;

    if (LeUtils.typeIs('object', _this.dataFile)) {
      _this.asignFileObj(_this.dataFile)
    } else if (LeUtils.typeIs('string', _this.dataFile)) {
      _this.asignFileObj({
        url: _this.dataFile,
        type: _this.defaultType,
        mime: '',
        name: LeUtils.baseName(_this.dataFile),
        is_encoded: false
      })
        if(!!_this.dataFile  && !_this.defaultType){ //&& !LeUtils.isUrl(_this.dataFile)
            LeRoute.quiet().request('web.l-e-s.files.info', {url: this.dataFile})
                .then(function (res) {
                    let data = LeUtils.valueGet(res, 'data');
                    if (!LeUtils.isEmpty(data)) {
                        _this.asignFileObj(data)
                    }
                })
        }


    }


  },
  mounted() {


  },
  beforeDestroy() {

  },
  watch: {},
  methods: {
    asignFileObj:function (data){
      let _this = this;
      this.fileObj = Object.assign({}, this.fileObj, data);
      this.fileViewType = this.defaultType;
      this.$nextTick(function (){
        _this.fileViewType = LeUtils.valueGet(this.fileObj,'type',this.defaultType);
      })
    },
    viewImage: function (src) {
      this.currentViewImageSrc = src;
      this.dialogViewImageVisible = true;

    },
    buildUrl: function (uri, params) {
      return LeUtils.buildUrl(uri, params)

    },
    getFileName: function () {
      if (this.fileName) {
        return this.fileName;
      }
      let fileName = LeUtils.valueGet(this.fileObj, 'name', '');

      if (fileName) {
        return fileName;
      }

      return LeUtils.baseName(LeUtils.valueGet(this.fileObj, 'url', ''))
    },
    handleViewImageClose: function () {
      this.currentViewImageSrc = '';
      this.dialogViewImageVisible = false;
    },

  }
}
</script>
